<template>
  <el-dialog
    custom-class="handleDialog"
    :title="titleName"
    top="15vh"
    width="800px"
    center
    :visible.sync="visible"
    :before-close="modelClose"
    @open="modelOpen"
    :close-on-click-modal="false"
    append-to-body>
    <el-form
      :rules="handleRules"
      ref="handleForm"
      :model="modelData"
      :disabled="formDisabled"
      v-loading="loading">
      <el-row :gutter="25">
        <el-col :span="12">
          <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
            <el-input
              v-model="modelData.name"
              maxlength="128"
              autocomplete="off"
              placeholder="请输入部门名称"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门简称" :label-width="formLabelWidth" prop="shortName">
            <el-input
              v-model="modelData.shortName"
              maxlength="32"
              autocomplete="off"
              placeholder="请输入部门名称"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系人" :label-width="formLabelWidth" prop="contact">
            <el-input
              v-model="modelData.contact"
              maxlength="32"
              autocomplete="off"
              placeholder="请输入联系人"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" :label-width="formLabelWidth" prop="telephone">
            <el-input
              v-model="modelData.telephone"
              maxlength="16"
              autocomplete="off"
              placeholder="请输入联系电话"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门邮箱" :label-width="formLabelWidth" prop="email">
            <el-input
              v-model="modelData.email"
              maxlength="16"
              autocomplete="off"
              placeholder="请输入部门邮箱"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="部门描述" :label-width="formLabelWidth" prop="description">
            <el-input
              type="textarea"
              maxlength="128"
              :rows="3"
              v-model="modelData.description"
              autocomplete="off"
              placeholder="请输入部门描述"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" v-show="btnVisible">
      <el-button type="primary" @click="formSubmit" :loading="loading">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'handleDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    modelType: {
      type: String,
      required: true,
      default: () => {
        return 'info';
      },
    },
    modelData: {
      type: Object,
      default: () => {
        return {
          name: '',
          shortName: '',
          parentId: '',
          description: '',
          telephone: '',
          email: '',
          contact: ''
        };
      },
    },
  },
  data() {
    return {
      titleName: '详情',
      formLabelWidth: '80px',
      dialogFormVisible: false,
      formDisabled: false,
      btnVisible: true,
      loading: false,
      handleRules: {
        name: this.$Validate.otherTxt(true, '请输入部门名称'),
        shortName: this.$Validate.otherTxt(true, '请输入部门简称'),
        contact: this.$Validate.integrateTxt(true, '请输入联系人'),
        //telephone: this.$Validate.telNumber(true, '请输入联系人电话'),
        //email: this.$Validate.email(true, '请输入部门邮箱'),        
      },
      treeRegionData: []
    }
  },
  mounted() {},
  methods: {
    // 对话框打开
    modelOpen() {
      switch (this.modelType) {
        case 'add':
          this.modelTypeChange('添加菜单', false, true);
          break;
        case 'info':
          this.modelTypeChange('菜单详情', true, false);
          break;
        case 'edit':
          this.modelTypeChange('编辑菜单', false, true);
          break;
        case 'subAdd':
          this.modelTypeChange('添加子部门', false, true);
          break;
        default:
          break;
      }
    },
    // 模式切换
    modelTypeChange(titleName, formDisabled, btnVisible) {
      this.titleName = titleName;
      this.formDisabled = formDisabled;
      this.btnVisible = btnVisible;
    },
    // 表单提交
    formSubmit() {
      this.$refs.handleForm.validate((valid) => {
        if (valid) {
          switch (this.modelType) {
            case 'add':
              // this.handleAdd(this.modelData);
              // break;
            case 'subAdd':
              this.handleAdd(this.modelData);
              break;
            case 'edit':
              this.handleEdit(this.modelData);
              break;
            default:
              break;
          }
        }
      });
    },
    // 新增
    handleAdd(formData) {
      this.loading = true;
      this.$api.department
        .add(formData)
        .then((res) => {
          this.$message.success('添加成功');
          this.loading = false;
          this.modelClose();
          this.$emit('loadList');
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
      
    },
    // 编辑
    handleEdit(formData) {
      this.loading = true;
      this.$api.department
        .update(formData)
        .then((res) => {
          this.$message.success('更新成功');
          this.loading = false;
          this.modelClose();
          this.$emit('loadList');
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    // 重置表单
    resetForm() {
      this.$nextTick(() => {
        this.$refs.handleForm.resetFields();
      });
    },
    // 对话框关闭
    modelClose() {
      this.resetForm();
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
  }

}
</script>

<style lang="scss" scoped>

</style>